<template> <!-- 图片放大 -->
  <transition name="fade">
    <div class="img_preview" @click="closePreview">
      <swiper :options='swiperOption' style="height: 100%">
        <swiper-slide v-for="(item,index) in previewList" :key="index" class="subject_swiper">
          <div class="img_box">
            <div class="img_num">{{index+1}}/{{previewList.length}}</div>
            <img :src="item">
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'preview',
  props:{
    previewList:{
      type: Array,
      value: []
    },
    imgIndex:{
      type: Number,
      value: 0,
    },
  },
  data() {
    return {
      swiperOption: { //可视区域个数
        slidesPerView: 'auto',
        initialSlide: this.imgIndex,
      },
    }
  },
  methods: {
    closePreview() {
      this.$parent.previewDialog = false
    }
  },
}
</script>

<style>
/* 图片放大 */
.img_preview{
  height: 100%;
  width: 100%;
  background: #000;
  position: fixed;
  left: 0;
  top:0;
  z-index: 2000;
}
.img_box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img_box img{
  width: 100%;
}
.img_num{
  position: absolute;
  left:48%; 
  top:20px;
  color: #fff;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

